<template>
  <div class="shopContent" ref="shopContent">
    <HearderTop></HearderTop>
    <searchBox class="newClass" :way="false"></searchBox>
    <div class="shop-content-box">
      <div class="box-width">
        <div class="detail-top" style="display: flex">
          <!-- <amplify :images="[...imgList]" :product="postData" :SKU="getSku" :videoUrl="''"></amplify> -->
          <div type="primary" class="mr20" style="position: sticky; top: 135px; height: 760px; z-index: 1">
            <amplify
              :images="videoUrl ? [videoUrl, ...imgList] : [...imgList]"
              :product="postData"
              :SKU="getSku"
              :videoUrl="videoUrl"
              :skuImgArr="skuImgArr"
            ></amplify>
          </div>
          <skuContent ref="skuRef" :postData="postData" @skuChanged="skuChanged"> </skuContent>
        </div>
        <div class="detail-bottom">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="商品信息详情" name="first">
              <shopInfo v-if="activeName === 'first'" :postData="postData" :videoUrl="videoUrl"></shopInfo>
            </el-tab-pane>
            <el-tab-pane label="品牌信息" name="second">
              <brand v-if="activeName === 'second'" :brandId="brandId"></brand>
            </el-tab-pane>
            <el-tab-pane label="封面产品" name="three">
              <coverProduct v-if="activeName === 'three'" :postData="postData"></coverProduct>
            </el-tab-pane>
            <el-tab-pane label="设计推荐" name="four">
              <recommendDesign :postData="postData"></recommendDesign>
            </el-tab-pane>
            <el-tab-pane label="实拍图" name="five">
              <reallyImage v-if="activeName === 'five'" :postData="postData"></reallyImage>
            </el-tab-pane>
            <el-tab-pane label="定制说明" v-if="postData.sourceType === 1 && postData.customTemplateId !== null" name="six">
              <div class="pt20" v-html="standardText"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <el-backtop target=".shopContent" :bottom="200" :visibility-height="800">
        <div
          class="back-top-wrap"
          style="height: 100%; width: 100%; text-align: center; line-height: 64px; color: #1989fa; border-radius: 50%"
        ></div>
      </el-backtop>
    </div>
  </div>
</template>
<script>
import HearderTop from "@/views/home/components/HearderTop";
import searchBox from "@/views/home//components/search";
import amplify from "@/views/home/components/amplify";
import skuContent from "@/views/home/components/skuContent";
import { getShopDetail, getShopDetail2 } from "@/apis/shopHome/detail";

export default {
  name: "shopDetail",
  components: { HearderTop, searchBox, amplify, skuContent },
  data() {
    return {
      imgList: [],
      videoUrl: "",
      postData: {},
      SKU: {},
      brandId: "",
      skuImgArr: [], //选中的sku包含的图片list
      standardText: "--" //定制说明
    };
  },
  mounted() {
    this.getShopDetails();
    setTimeout(() => {
      console.log(11111, this.$refs.skuRef.getSkuObject());
    }, 500);
  },
  computed: {},
  methods: {
    skuChanged(skuObj) {
      const propertiesArr = JSON.parse(skuObj?.properties || "") || [];
      this.skuImgArr = [];
      propertiesArr.map(item => {
        if (item.speType === 3 && item.statsText) {
          this.skuImgArr.push(item.statsText);
        }
      });
      console.log("sku变更了===", this.skuImgArr);
    },
    getSku() {
      return this.$refs.skuRef.getSkuObject();
    },
    async getShopDetails() {
      let postData = new FormData();
      postData.append("productId", this.$route.query.id);
      let res = {};
      if (this.$route.query.isFactory) {
        res = await getShopDetail2(postData);
      } else {
        res = await getShopDetail(postData);
      }

      const { data } = res;
      const imageList = data.sliderPicUrlList || [];
      this.videoUrl = data.sliderVedioUrl;
      this.imgList = imageList;
      this.postData = data || [];
      // brandId
      this.brandId = res.data.brandId;

      console.log("商品详情===", data);
      let _standardText = "";
      data?.customTemplate?.templateDetailList?.map(item => {
        _standardText += item.standardText;
      });
      this.standardText = _standardText;
      // getShopDetail(postData)
      //   .then(res => {
      //     const { data } = res;
      //     const imageList = data.sliderPicUrlList || [];
      //     this.videoUrl = data.sliderVedioUrl;
      //     this.imgList = imageList;
      //     this.postData = data || [];
      //     // brandId
      //     this.brandId = res.data.brandId;

      //     console.log("商品详情===", data);
      //     let _standardText = "";
      //     data?.customTemplate?.templateDetailList?.map(item => {
      //       _standardText += item.standardText;
      //     });
      //     this.standardText = _standardText;
      //   })
      //   .catch(() => {});
    }
  }
};
</script>
<script setup>
import shopInfo from "../home/components/shopInfo.vue";
import coverProduct from "../home/components/coverProduct.vue";
import reallyImage from "../home/components/reallyImage.vue";
import brand from "../home/components/brand.vue";
import recommendDesign from "../home/components/recommendDesign.vue";

import { ref, provide } from "vue";
const activeName = ref("first");

const toCustomRemark = () => {
  activeName.value = "six";
};
provide("toCustomRemark", toCustomRemark);

const handleClick = tab => {
  console.log(tab);
};
</script>
<style lang="scss" scoped>
.back-top-wrap {
  background: url("@/assets/images/back-top.png") no-repeat;
  background-size: 100% 100%;
}
:deep(.el-backtop) {
  right: calc(((100vw - 1200px) / 2) - 80px) !important;
  width: 64px !important;
  height: 64px !important;
  box-shadow: 0px 8px 32px 0px rgba(1, 46, 100, 0.3) !important;
  i {
    display: none;
  }
}
:deep(.el-tabs__nav-scroll) {
  padding: 0 16px;
  .el-tabs__item.is-top.is-active {
    font-family: "SHS-Medium" !important;
  }
}
.affix-container {
  height: 1700px;
}
.shopContent {
  background: white;
  height: calc(100vh - 6px);
  overflow-y: auto;
}
.shop-content-box {
  width: 1200px;
  margin: 0 auto;
  background: white;
}
.detail-top {
  margin: 135px 0px 0 0px;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  padding: 20px 0;
  padding-top: 40px;
}

.detail-bottom {
  padding: 50px 0px;
  padding-top: 60px;
}

.upLogo {
  height: 50%;
  width: 50%;
  background-color: var(--el-bg-color-overlay);
  box-shadow: var(--el-box-shadow-lighter);
  text-align: center;
  line-height: 40px;
  color: #1989fa;
}
</style>
